<template>
    <view class="dialog" v-if="dialog" @tap="dialog = false">
        <view class="content" @tap.stop="none">
            <image :src="src" class="invite" mode="widthFix" />
            <!-- #ifdef H5 -->
            <view class="bottom font-30">
                长按保存到相册
                <image :src="src" mode="" />
            </view>
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <view class="bottom-box">
                <button class="save" @tap="saveImg">{{ $t('invitePage.saveThePicture') }}</button>
                <!-- <button class="share" @tap="isShare = true">发给朋友</button> -->
            </view>
            <!-- #endif -->
        </view>
        <!-- #ifndef H5 -->
        <!-- 分享弹窗 -->
        <view class="modal-bg" v-show="isShare" @click="isShare = false" @touchmove.stop.prevent></view>
        <view class="modal-box" v-show="isShare" :class="[isShare ? 'gdIn' : 'gdOut']" @tap.stop="none" @touchmove.stop.prevent>
            <view class="modal-top">
                <view class="share-box" @click="wx_share">
                    <image src="../../static/wx_logo.png" mode=""></image>
                    <text class="">{{ $t('invitePage.weChat') }}</text>
                </view>
                <view class="share-box" @click="pyq_share">
                    <image src="../../static/pyq_logo.png" mode=""></image>
                    <text class="">{{ $t('invitePage.circleOfFriends') }}</text>
                </view>
            </view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props: {
        value: {}
    },
    data() {
        return {
            dialog: false,
            src: '',
            isShare: false
        }
    },
    computed: {
        ...mapState(['$image'])
    },
    methods: {
        async open() {
            // #ifdef H5
            await this.$http('get|api/User/getwxacode').then(res => {
                this.src = this.$image + res.result.wx_code
                console.log(this.src)
            })
            // #endif
            // #ifdef APP-PLUS
            await this.$http('get|api/User/getappcode').then(res => {
                this.src = this.$image + res.result.app_code
                console.log(this.src)
            })
            // #endif
        },
        none() {
            return false
        },
        saveImg() {
            uni.showLoading()
            uni.downloadFile({
                url: this.src, //仅为示例，并非真实的资源
                success: res => {
                    console.log(res)
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: suc => {
                            uni.hideLoading()
                            this.$toastApp(this.$t('invitePage.saveSuccess'))
                        },
                        fail: e => {
                            uni.hideLoading()
                            console.log(e)
                            this.$toastApp(this.$t('invitePage.saveError'))
                        },
                        complete: com => {
                            console.log(com)
                        }
                    })
                }
            })
        },
        wx_share() {
            uni.share({
                provider: 'weixin',
                scene: 'WXSceneSession',
                type: 2,
                imageUrl: this.src,
                success: res => {
                    this.$toastApp(this.$t('invitePage.shareSuccess'))
                },
                fail: err => {
                    console.log('fail:' + JSON.stringify(err))
                    this.$toastApp(JSON.stringify(err))
                }
            })
        },
        pyq_share() {
            uni.share({
                provider: 'weixin',
                scene: 'WXSenceTimeline',
                type: 2,
                imageUrl: this.src,
                success: res => {
                    this.$toastApp(this.$t('invitePage.shareSuccess'))
                },
                fail: err => {
                    console.log('fail:' + JSON.stringify(err))
                    this.$toastApp(JSON.stringify(err))
                }
            })
        }
    },
    watch: {
        async value(val) {
            if (val) {
                await this.open()
            }
            this.dialog = val
        },
        dialog(val) {
            this.$emit('input', val)
        }
    }
}
</script>

<style lang="scss">
.content {
    width: 630rpx;
    position: fixed;
    top: 50%;
    margin-top: -490rpx;
    left: 50%;
    margin-left: -315rpx;
    transform: scale(0.8);
}

.invite {
    width: 630rpx;
    height: 900rpx;
    background-size: 80%;
}

.bottom {
    width: 100%;
    height: 90rpx;
    margin-top: 26rpx;
    background-color: #ffffff;
    color: var(--theme);
    text-align: center;
    line-height: 90rpx;
    border-radius: 10rpx;
    position: relative;

    image {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

.bottom-box {
    display: flex;
    justify-content: space-between;

    .save {
        background-color: #f5a623;
        color: #ffffff;
        width: 48%;
    }

    .share {
        background-color: var(--theme);
        color: #ffffff;
        width: 48%;
    }
}

//分享弹窗
.modal-bg {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.modal-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 9999;

    .modal-top {
        width: 100vw;
        height: 200rpx;
        background: #ffffff;
        color: #313133;
        font-size: 36rpx;
        margin: auto;
        padding-left: 20rpx;
    }

    .modal-bto {
        color: #7a7a80;
        margin-bottom: 20rpx;
    }

    .share-box {
        display: inline-block;
        margin-left: 30rpx;
        margin-top: 30rpx;
        text-align: center;

        image {
            width: 100rpx;
            height: 100rpx;
            // margin-top: 40rpx;
            vertical-align: middle;
        }

        text {
            display: block;
            font-size: 26rpx;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #999999;
            line-height: 36rpx;
            letter-spacing: -1px;
        }
    }
}

@keyframes gdIn {
    from {
        bottom: -1000px;
    }

    100% {
        bottom: 0px;
    }
}

.gdIn {
    animation: gdIn 200ms ease-out forwards;
}

@keyframes gdOut {
    from {
        bottom: 0px;
    }

    100% {
        bottom: -1000px;
    }
}

.gdOut {
    animation: gdOut 200ms ease-in forwards;
}
</style>
